<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是庄家</title>
    <script type="text/javascript" src="layuiadmin/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <link rel="stylesheet" href="layuiadmin/layui/css/layui.css">
    <link rel="stylesheet" href="layuiadmin/style/admin.css">
    <style>
        .sel_btn{
            height: 35px;
            line-height: 35px;
            padding: 0 11px;
            background-color: #1E9FFF;
            border-radius: 3px;
            display: inline-block;
            text-decoration: none;
            font-size: 14px;
            outline: none;
            color: white;
        }
        .ch_cls{
            background: #e4e4e4;
        }
        .layui-table-cell{
            height:60px;
            line-height: 60px;
        }
        .onlineDiv{
            width: 120px;
            height: 180px;
            border: 1px solid red;
            border-radius: 15px;
            display: inline-block;
            margin: 20px;
        }
        .onlineDivTwo{
            width: 220px;
            height: 180px;
            border: 1px solid red;
            border-radius: 15px;
            display: inline-block;
            margin-left: 15px;
        }
    </style>
</head>
<body>
    <div style="width: 1250px;text-align: center">
        <div>
            <!--<div style="font-size: 20px;text-align: center">
                <span id="currentStatus" style="color: red;"></span>我当前抓取的牌是：<img id="mySelfCardImg" style="width: 60px;height: 80px;" src="" alt=""><img id="mySelfCardImg1" style="width: 60px;height: 80px;display: none" src="" alt="">&lt;!&ndash;【<span id="myCard" style="color: red"></span>】&ndash;&gt;
                公共的牌是：&lt;!&ndash;【<span id="publicCard" style="color: red"></span>】&ndash;&gt;<img id="publicImg" style="width: 60px;height: 80px;" src="" alt="">
            </div>-->
            <div style="margin-top: 20px; text-align: center">
                <button class="layui-btn layui-btn-danger" id="shuffle">一键洗牌</button>
                <!--<button class="layui-btn layui-btn-normal" id="showPublicCard">发底牌</button>-->
                <!--<button class="layui-btn layui-btn-normal" id="getSelfCard">取牌</button>-->
                <!--<button class="layui-btn layui-btn-normal" id="flopMyCard">翻开我的牌</button>-->
                <button class="layui-btn layui-btn-warm" id="playMethod" >玩法介绍</button>
                <button class="layui-btn layui-btn-lg" id="dissolve">解散房间</button>
            </div>

            <div style="font-size: 20px;margin-top: 20px; text-align: center">
                剩余的牌有：<span id="shenyu"></span>
            </div>

            <fieldset class="layui-elem-field" style="display: none;" id="publicFieldSet">
                <legend>******底牌在这儿******</legend>
                <div id="publicCardDiv" style="/*display: none;*/margin-top: 20px; text-align: center" class="layui-field-box">
                    <div class="onlineDiv">
                        <img id="publicImg" style="width: 90px;height: 110px;padding: 10px;" src="img/morengong.png" alt="">
                        <button class="layui-btn layui-btn-xs" id="showPublicCard">发底牌</button>
                    </div>
                </div>
            </fieldset>

            <fieldset class="layui-elem-field" style="display: none;" id="mengtuoFieldSet">
                <legend>当前在线：</legend>
                <div id="onlineMtUserList" style="/*display: none;*/margin-top: 20px; text-align: center" class="layui-field-box">
                </div>
            </fieldset>

            <fieldset class="layui-elem-field" style="display: none;" id="shouFieldSet">
                <legend>当前在线：</legend>
                <div id="onlineSypUserList" style="/*display: none;*/margin-top: 20px; text-align: center" class="layui-field-box">
                </div>
            </fieldset>

            <!--<div style="margin-top: 20px; text-align: center">
                <a class="sel_btn" id="restart">重新开始</a>
            </div>-->
        </div>
        <div style="margin-top: 20px; height: 300px;margin-left: 332px;float: left;display: block;">
            <!--<div>【翻牌记录】</div>-->
            <table id="flopRecord" lay-filter="flopRecord"></table>
        </div>
        <div style="margin-top: 20px; height: 300px;float: right;display: block;margin-right: 250px;">
            <!--<div>【摸牌记录】</div>-->
            <table id="licensingRecord" lay-filter="licensingRecord"></table>
        </div>
    </div>
    <script>
        var username = '';
        var role = '';
        var selfCard = '';
        var model = '';
        var layer;
        layui.use('table', function(){
            var table = layui.table;
            var $ = layui.jquery;
            layer = layui.layer; //独立版的layer无需执行这一句
            // 1 庄 2 民
            //role = getUrlParameter('role');
            username = getUrlParameter('name');
            //model = getUrlParameter('model');


            if(role == '1'){

            }else if(role == '0'){

            }

            /*if(role == '1'){
                $('#currentStatus').text('【庄】');
            }else{
                $('#currentStatus').text('【民】');
            }*//*

        //getSelfCard();
        $('#mySelfCardImg').attr('src','img/morengong.png');

        //刚进入页面时候，庄家没发公牌之前的默认图片
        $('#publicImg').attr('src','img/morengong.png');

        $('#shenyu').text(getTotal());

        if(model == '0'){
            $('#showPublicCard').show();
        }else if(model == '1'){
            $('#showPublicCard').hide();
            $('#mySelfCardImg1').attr('src','img/morengong.png');
            $('#mySelfCardImg1').show();
        }*/

            setInterval(function () {
                getUsers();
            },3000);

            //第一个实例
            /*table.render({
                elem: '#flopRecord'
                ,width:310
                ,height:800
                ,url: 'getFlopLog' //数据接口
                //,page: true //开启分页
                //,data: flopLog
                ,cols: [[ //表头
                    ,{field: 'name', title: '名称', width:120}
                    ,{field: 'log', title: '翻牌记录', width:180,templet : function(d) {
                            return '<span>翻开了牌：</span><img style="width: 40px;height: 60px;" src="'+ d.log +'">';
                        }}
                ]],
                done: function (res, curr, count) {
                    console.log(res.data.flopLog);
                }
            });*/

            /*table.render({
                elem: '#licensingRecord'
                ,url: 'getLicensingLog' //数据接口
                ,width:300
                ,height: 800
                //,page: true //开启分页
                ,cols: [[ //表头
                    {field: 'log', title: '摸牌记录', width:295,templet : function(d) {
                        if(d.log.indexOf('.png') > 0){
                            return '<span style="color: red;">庄家发了底牌：</span><img style="width: 40px;height: 60px;" src="'+ d.log +'">';
                        }else{
                            return '<span>'+d.log+'</span>';
                        }
                    }}
                ]],
                done: function (res, curr, count) {

                }
            });*/

            /*function getPub() {
                /!*$.ajax({
                    url:'pubCard',
                    type:'get',
                    async:false,
                    success:function(res){
                        if(res.code == 200){
                            //$('#publicCard').text(res.data);
                            if(res.data){
                                $('#publicImg').attr('src',res.data);
                            }
                            $('#shenyu').text(getTotal());
                        }else if(res.code == 500){
                            layer.tips(res.message);
                            $('#shenyu').text(getTotal());
                        }
                    },
                    error: function(msg){}
                });*!/
                //getPrivCard(username);
                //getUsers();
                //table.reload('flopRecord', {where: {}});
                //table.reload('licensingRecord', {where: {}});
            }*/

            /*$('#getPub').on('click',function () {
                $.ajax({
                    url:'pubCard',
                    type:'get',
                    success:function(res){
                        if(res.code == 200){
                            $('#myCard').text(res.data.selfCard);
                            $('#shenyu').text(getTotal());
                        }
                    },
                    error: function(msg){

                    }
                });

                table.reload('flopRecord', {
                    where: {

                    }
                });

                table.reload('licensingRecord', {
                    where: {

                    }
                });
            });*/

            /*$('#getSelfCard').on('click',function () {
                $.ajax({
                    url:'getSelfCard?name=' + username,
                    type:'get',
                    success:function(res){
                        if(res.code == 200){
                            $('#myCard').text(res.data.selfCard);
                            $('#shenyu').text(getTotal());
                        }else if(res.code == 500){
                            layer.msg(res.data.message);
                        }
                    },
                    error: function(msg){

                    }
                });
            });*/
            function getSelfCard() {
                $.ajax({
                    url:'getSelfCard?name=' + username,
                    type:'get',
                    success:function(res){
                        if(res.code == 200){
                            /*$('#myCard').text(res.data.selfCard);*/
                            $('#mySelfCardImg').attr('src',res.data.selfCard);
                            $('#shenyu').text(getTotal());
                        }else if(res.code == 500){
                            layer.msg(res.msg);
                        }
                    },
                    error: function(msg){

                    }
                });
            }

            $('#flopMyCard').on('click',function () {
                var myCardUrl = $('#mySelfCardImg').attr('src');
                var myCardUrl1 = $('#mySelfCardImg1').attr('src');
                if(model == 1 && myCardUrl == 'img/morengong.png' && myCardUrl1 == 'img/morengong.png'){
                    layer.msg("你还没牌啊，翻啥？？");
                    return;
                }
                if(model == 0 && myCardUrl == 'img/morengong.png'){
                    layer.msg("你还没牌啊，翻啥？？");
                    return;
                }
                var flopMyCardUrl = '';
                if(model == '0'){
                    flopMyCardUrl = 'flopMyCard?name=' + username + '&card=' + myCardUrl;
                }else if(model == '1'){
                    flopMyCardUrl = 'flopMyCard?name=' + username + '&card=' + myCardUrl + '&card1=' + myCardUrl1;
                }
                layui.layer.confirm('确定要翻开吗？', {
                    btn: ['翻开','算了'] //按钮
                }, function(){
                    $.ajax({
                        url:flopMyCardUrl,
                        type:'get',
                        //dataType:'json',
                        //data:{'username':username,'role':role,'curCard':$('#myCard').text()},
                        success:function(res){
                            if(res.code == 200){
                                layer.msg("翻牌成功！");
                                table.reload('flopRecord', {where: {}});
                                getReSetCard(username,model);
                                getPrivCard(username);
                                //getSelfCard();
                            }
                        },
                        error: function(msg){

                        }
                    });
                }, function(){

                });
            });

            $('#showPublicCard').on('click',function () {
                $.ajax({
                    url:'v2/setPubCard?homeownerName=' + username,
                    type:'get',
                    async:false,
                    success:function(res){
                        if(res.code == 200){
                            layer.msg("成功发了一张底牌！！！");
                        }else if(res.code == 500){
                            layer.msg(res.msg);
                        }else{
                            layer.msg("发底牌失败！");
                        }
                    },
                    error: function(msg){
                        layer.msg("发底牌错误！");
                    }
                });
            });

            $('#shuffle').on('click',function () {
                $.ajax({
                    url:'v2/flash?homeownerName=' + username,
                    type:'get',
                    async:false,
                    success:function(res){
                        if(res.data == 1){
                            layer.alert('洗牌成功');
                            $('#shenyu').text('55');
                        }
                    },
                    error: function(msg){

                    }
                });
            });

            $('#dissolve').on('click',function () {
                $.ajax({
                    url:'v2/dissolve?homeownerName=' + username,
                    type:'get',
                    async:false,
                    success:function(res){
                        if(res.code == 200){
                            layer.msg("房间已解散！！！");
                            window.location.href="roomlist.html?name=" + username;
                        }
                    },
                    error: function(msg){}
                });
            });

            $('#restart').on('click',function () {
                $.ajax({
                    url:'reStart',
                    type:'get',
                    async:false,
                    success:function(res){
                        if(res.data == 1){
                            $('#shenyu').text('55');
                        }
                    },
                    error: function(msg){

                    }
                });
                var indexUrl = 'index.html?name=' + username;
                $('#restart').attr('href',indexUrl);
                userLogOut();
                /*layer.confirm('确定要重新开始吗？', {
                    btn: ['重新开始','继续'] //按钮
                }, function(){
                    $.ajax({
                        url:'reStart',
                        type:'get',
                        async:false,
                        success:function(res){
                            if(res.data == 1){
                                $('#shenyu').text('54');
                            }
                        },
                        error: function(msg){

                        }
                    });
                    var indexUrl = 'index.html?name=' + username;
                    $('#restart').attr('href',indexUrl);
                    userLogOut();
                }, function(){

                });*/
            });

            $('#playMethod').on('click',function () {
                //页面层
                layer.open({
                    type: 1,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['420px', '240px'], //宽高
                    title:'玩法介绍',
                    content: '<p>1、民勤特别玩法</p>'+
                        '<p>2、其实吧，规矩是死的，人是活的，不要太死板，渴了就【喝点】！！</p>'+
                        '<p>3、其实只有庄家才可以【洗牌】哦！！</p>'+
                        '<p>4、等庄家【发公牌】，你的页面上将会显示出来公共的牌，注意，你自己的的牌需要和公牌比哦！！</p>'+
                        '<p>5、【翻开我的牌】是将你自己的牌翻开，这样所有人都可以看到了！！</p>'+
                        '<p>6、【重新开始】是结束本轮游戏，注意首先需要庄家允许，才可以开下一轮！！</p>'+
                        '<p>7、【翻牌记录】将会记录所有人的所有翻牌操作，不会给你作弊的机会的！！</p>'+
                        '<p>8、【摸牌记录】将会记录所有人的抓牌操作，你抓取的任何一张牌，大家都知道，抓错了？？赶紧喝吧</p>'
                });
            });
        });

        function getUsers(){
            $.ajax({
                url:'v2/getHome?homeownerName=' + username,
                type:'get',
                async:false,
                success:function(res){
                    if(res.code == 200){
                        // var data = '{"msg":"success","code":200,"data":{"mode":2,"userNum":2,"homeowner":"wdc","players":[{"name":"wdc","role":1,"myCards":["img/hongtaoK.png"],"cardsSize":1,"cardsState":1},{"name":"cj","role":0,"myCards":["img/meihua3.png"],"cardsSize":1,"cardsState":1}],"pubCard":"img/bb.png","pooSize":52}}';
                        var obj = res.data;
                        //var obj = JSON.parse(data);
                        var homeowner = obj.homeowner;
                        $('#shenyu').text(obj.pooSize);
                        var mode = obj.mode;
                        if(mode == '2'){
                            $('#publicFieldSet').show();
                            $('#mengtuoFieldSet').show();
                            $('#shouFieldSet').hide();
                        }else if(mode == '1'){
                            $('#publicFieldSet').hide();
                            $('#mengtuoFieldSet').hide();
                            $('#shouFieldSet').show();
                        }
                        var btnHtml = '';
                        if(mode == '2'){
                            if(obj.pubCard){
                                $('#publicImg').attr('src',obj.pubCard);
                            }else{
                                $('#publicImg').attr('src',"img/morengong.png");
                            }
                            $('#onlineMtUserList').children().remove();
                            for(var i = 0 ; i <obj.players.length ; i ++){
                                btnHtml += '<div class="onlineDiv">' +
                                    '<span>'+ obj.players[i].name +'</span>';
                                if(obj.players[i].cardsState == '0'){
                                    btnHtml += '<img style="width: 90px;height: 110px;padding: 10px;" src="img/morengong.png" >';
                                }else if(obj.players[i].cardsState == '1'){
                                    if(homeowner == obj.players[i].name){
                                        btnHtml += '<img style="width: 90px;height: 110px;padding: 10px;" src="'+obj.players[i].myCards[0].cardUrl+'" >';
                                    }else{
                                        btnHtml += '<img style="width: 90px;height: 110px;padding: 10px;" src="img/beimian.png" >';
                                    }
                                }else if(obj.players[i].cardsState == '2'){
                                    btnHtml += '<img style="width: 90px;height: 110px;padding: 10px;" src="'+ obj.players[i].myCards[0].cardUrl +'" >';
                                }
                                if(obj.players[i].role == '1' && obj.players[i].name == username){
                                    btnHtml += '<button class="layui-btn layui-btn-xs" onclick="giveYou(\''+homeowner+'\',\''+obj.players[i].name+'\')">发牌</button>'+
                                               '<button class="layui-btn layui-btn-xs" onclick="flopMyCard(\''+homeowner+'\',\''+obj.players[i].name+'\',\''+obj.players[i].cardsState+'\')">翻开</button>'+
                                               '<button class="layui-btn layui-btn-xs" onclick="loseCard(\''+homeowner+'\',\''+obj.players[i].name+'\',\''+obj.players[i].cardsState+'\')">扔掉</button>';
                                }else if(obj.players[i].role == '0' && obj.players[i].name != username){
                                    btnHtml += '<button class="layui-btn layui-btn-xs" onclick="giveYou(\''+homeowner+'\',\''+obj.players[i].name+'\')">发牌</button>';
                                }
                                btnHtml += '</div>';
                            }
                            $('#onlineMtUserList').append(btnHtml);
                        }else if(mode == '1'){
                            $('#onlineSypUserList').children().remove();
                            for (var i = 0; i < obj.players.length; i++) {
                                btnHtml += '<div class="onlineDivTwo"><div><span>'+obj.players[i].name+'</span></div>';
                                if(obj.players[i].cardsState == '0' && obj.players[i].cardsSize == 0){//state = 0 && size = 0 未发牌
                                    btnHtml += '<img style="width: 90px;height: 110px;padding: 10px 5px;" src="img/morengong.png" alt="">'+
                                        '<img style="width: 90px;height: 110px;padding: 10px 5px;" src="img/morengong.png" alt="">';
                                }else if(obj.players[i].cardsState == '0' && obj.players[i].cardsSize == 1){// state = 0 && size = 1 发了一张
                                    if(homeowner == obj.players[i].name){
                                        btnHtml += '<img style="width: 90px;height: 110px;padding: 10px 5px;" src="'+obj.players[i].myCards[0].cardUrl+'" alt="">'+
                                            '<img style="width: 90px;height: 110px;padding: 10px 5px;" src="img/morengong.png" alt="">';
                                    }else{
                                        btnHtml += '<img style="width: 90px;height: 110px;padding: 10px 5px;" src="img/beimian.png" alt="">'+
                                            '<img style="width: 90px;height: 110px;padding: 10px 5px;" src="img/morengong.png" alt="">';
                                    }
                                }else if(obj.players[i].cardsState == '1'){ // state = 1 发了两张 自己能看到，其他人背面
                                    if(homeowner == obj.players[i].name){
                                        btnHtml += '<img style="width: 90px;height: 110px;padding: 10px 5px;" src="'+obj.players[i].myCards[0].cardUrl+'" alt="">'+
                                            '<img style="width: 90px;height: 110px;padding: 10px 5px;" src="'+obj.players[i].myCards[1].cardUrl+'" alt="">';
                                    }else{
                                        btnHtml += '<img style="width: 90px;height: 110px;padding: 10px 5px;" src="img/beimian.png" alt="">'+
                                            '<img style="width: 90px;height: 110px;padding: 10px 5px;" src="img/beimian.png" alt="">';
                                    }
                                }else if(obj.players[i].cardsState == '2') { // state = 2 两张都翻开了
                                    btnHtml += '<img style="width: 90px;height: 110px;padding: 10px 5px;" src="' + obj.players[i].myCards[0].cardUrl + '" alt="">' +
                                        '<img style="width: 90px;height: 110px;padding: 10px 5px;" src="' + obj.players[i].myCards[1].cardUrl + '" alt="">';
                                }
                                if(obj.players[i].role == '1' && obj.players[i].name == username){
                                    btnHtml += '<button class="layui-btn layui-btn-xs" onclick="giveYou(\''+homeowner+'\',\''+obj.players[i].name+'\')">发牌</button>'+
                                               '<button class="layui-btn layui-btn-xs" onclick="flopMyCard(\''+homeowner+'\',\''+obj.players[i].name+'\',\''+obj.players[i].cardsState+'\')">翻开</button>'+
                                               '<button class="layui-btn layui-btn-xs" onclick="loseCard(\''+homeowner+'\',\''+obj.players[i].name+'\',\''+obj.players[i].cardsState+'\')">扔掉</button>';
                                }else if(obj.players[i].role == '0' && obj.players[i].name != username){
                                    btnHtml += '<button class="layui-btn layui-btn-xs" onclick="giveYou(\''+homeowner+'\',\''+obj.players[i].name+'\')">发牌</button>';
                                }
                                btnHtml += '</div>';
                            }
                            $('#onlineSypUserList').append(btnHtml);
                        }
                    }
                },
                error: function(msg){}
            });
        }

        function giveYou(homeowner,name) {
            $.ajax({
                url:'v2/setPriCard?homeownerName=' + homeowner + '&userName=' + name,
                type:'get',
                async:false,
                success:function(res){
                    if(res.code == 200){
                        layer.msg("给【"+name+"】发牌成功！！！");
                    }else if(res.code == 500){
                        layer.msg(res.msg);
                    }
                },
                error: function(msg){}
            });
        }

        function flopMyCard(homeowner,name,cardState){
            layer.confirm('确定翻看吗？', {
                btn: ['确定','取消'] //按钮
            }, function() {
                if(cardState == 0 || cardState == 2){
                    layer.msg("你没牌啊，不能翻牌");
                    return;
                }
                $.ajax({
                    url:'v2/flop?homeownerName=' + homeowner + '&userName=' + name,
                    type:'get',
                    async:false,
                    success:function(res){
                        if(res.code == 200){
                            layer.msg("翻牌成功！！！");
                        }else if(res.code == 500){
                            layer.msg(res.msg);
                        }
                    },
                    error: function(msg){}
                });
            });
        }

        function loseCard(homeowner,name,cardState) {
            if(cardState == 0){
                layer.msg("一张不能随便扔掉！！");
                return;
            }
            if(cardState == 2){
                layer.msg("已经翻开了，不能扔牌！！");
                return;
            }
            layer.confirm('确定扔掉吗？', {
                btn: ['确定','取消'] //按钮
            }, function() {
                $.ajax({
                    url:'v2/loseCard?homeownerName=' + homeowner + '&userName=' + name,
                    type:'get',
                    async:false,
                    success:function(res){
                        if(res.code == 200){
                            layer.msg("【"+name+"】扔牌成功！！！");
                        }else if(res.code == 500){
                            layer.msg(res.msg);
                        }
                    },
                    error: function(msg){}
                });
            });
        }

        function getTotal() {
            var total = 0;
            $.ajax({
                url:'getTotal',
                type:'get',
                async:false,
                success:function(res){
                    if(res.code == 200){
                        total = res.data.total;
                    }
                },
                error: function(msg){

                }
            });
            return total;
        }

        function userLogOut() {
            $.ajax({
                url:'userLogOut?name=' + username,
                type:'get',
                async:false,
                success:function(res){
                    if(res.code == 200){}
                },
                error: function(msg){}
            });
        }

        function getPrivCard(name) {
            $.ajax({
                url:'getPrivCard?name=' + name + '&model=' + model,
                type:'get',
                async:false,
                success:function(res){
                    if(res.code == 200){
                        if(model == 1 && res.data == 'null:null'){
                            $('#mySelfCardImg').attr('src','img/morengong.png');
                            $('#mySelfCardImg1').attr('src','img/morengong.png');
                        }else if(model == 1 && res.data.indexOf(':') > -1){
                            $('#mySelfCardImg').attr('src',res.data.split(':')[0]);
                            if(!res.data.split(':')[1]){
                                $('#mySelfCardImg1').attr('src','img/morengong.png');
                            }else{
                                $('#mySelfCardImg1').attr('src',res.data.split(':')[1]);
                            }
                        }

                        if(model == 0 && (res.data == "null" || !res.data || res.data == 'undefined')){
                            $('#mySelfCardImg').attr('src','img/morengong.png');
                            $('#mySelfCardImg1').attr('src','img/morengong.png');
                        }else if(model == 0 && (res.data != "null" || res.data || res.data != 'undefined')){
                            $('#mySelfCardImg').attr('src',res.data);
                            $('#mySelfCardImg1').attr('src',res.data);
                        }
                    }
                },
                error: function(msg){}
            });
        }

        function getReSetCard(username,model) {
            $.ajax({
                url:'reSetCard?name=' + username + '&model=' + model,
                type:'get',
                async:false,
                success:function(res){
                    if(res.code == 200){}
                },
                error: function(msg){}
            });
        }

    </script>
</body>
</html>
